<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>搭子星球 - 寻找你的同伴</title>
		<script src="https://cdn.tailwindcss.com"></script>
		<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

		<!-- 配置Tailwind主题 -->
		<script>
			tailwind.config = {
				theme: {
					extend: {
						colors: {
							primary: '#7C3AED', // 主色调：紫色（代表社交与活力）
							secondary: '#EC4899', // 辅助色：粉色（增加亲和力）
							neutral: '#F3F4F6', // 中性色：浅灰
							dark: '#1F2937', // 深色文本
						},
						fontFamily: {
							sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif'],
						},
					},
				}
			}
		</script>

		<style type="text/tailwindcss">
			@layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card-shadow {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
      }
    }
  </style>
	</head>

	<body class="bg-gray-50 font-sans text-dark overflow-x-hidden">
		<!-- 登录界面 -->
		<div id="login-page" class="min-h-screen flex flex-col bg-gradient-to-b from-purple-50 to-white">
			<!-- 顶部装饰 -->
			<div class="h-32 w-full bg-primary/10 rounded-b-[40px] relative overflow-hidden">
				<div class="absolute -right-10 -top-10 w-40 h-40 bg-primary/20 rounded-full blur-2xl"></div>
				<div class="absolute left-10 top-10 w-20 h-20 bg-secondary/20 rounded-full blur-xl"></div>
			</div>

			<!-- 登录容器 -->
			<div class="flex-1 px-6 py-8 relative">
				<div class="max-w-md mx-auto">
					<!-- 标题 -->
					<div class="text-center mb-10 mt-6">
						<h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-primary mb-2 text-shadow">搭子星球</h1>
						<p class="text-gray-500">找到志同道合的TA，一起探索美好生活</p>
					</div>

					<!-- 登录表单 -->
					<div
						class="bg-white rounded-2xl p-8 card-shadow mb-6 transform transition-all duration-300 hover:shadow-lg">
						<!-- 登录选项卡 -->
						<div class="flex border-b border-gray-200 mb-6">
							<button
								class="login-tab active py-2 px-1 flex-1 text-center font-medium text-primary border-b-2 border-primary">
								账号密码登录
							</button>
							<!-- <button
								class="login-tab py-2 px-1 flex-1 text-center font-medium text-gray-500 hover:text-primary transition-colors">
								手机验证码登录
							</button> -->
						</div>

						<!-- 账号密码登录表单 -->
						<div id="password-login" class="login-form">
							<div class="mb-4">
								<label class="block text-sm font-medium text-gray-700 mb-1">账号/手机号</label>
								<div class="relative">
									<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
										<i class="fa fa-user"></i>
									</span>
									<input type="text" placeholder="请输入账号或手机号"
										class="w-full pl-10 pr-3 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
										autocomplete="username">
								</div>
							</div>

							<div class="mb-6">
								<label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
								<div class="relative">
									<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
										<i class="fa fa-lock"></i>
									</span>
									<input type="password" placeholder="请输入密码"
										class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
										autocomplete="current-password">
									<button
										class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-primary transition-colors">
										<i class="fa fa-eye-slash"></i>
									</button>
								</div>
							</div>

							<div class="flex items-center justify-between mb-6">
								<label class="flex items-center">
									<input type="checkbox"
										class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary">
									<span class="ml-2 text-sm text-gray-600">记住密码</span>
								</label>
								<a href="#"
									class="text-sm text-primary hover:text-primary/80 transition-colors">忘记密码?</a>
							</div>
						</div>

						<!-- 手机验证码登录表单 (默认隐藏) -->
						<div id="code-login" class="login-form hidden">
							<div class="mb-4">
								<label class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
								<div class="relative">
									<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
										<i class="fa fa-mobile"></i>
									</span>
									<input type="tel" placeholder="请输入手机号"
										class="w-full pl-10 pr-3 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
										autocomplete="tel">
								</div>
							</div>

							<div class="mb-6">
								<label class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
								<div class="relative">
									<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
										<i class="fa fa-shield"></i>
									</span>
									<input type="text" placeholder="请输入验证码"
										class="w-full pl-10 pr-3 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all">
									<button
										class="absolute inset-y-0 right-0 flex items-center pr-3 text-primary hover:text-primary/80 transition-colors bg-primary/5 px-3 rounded-r-lg">
										获取验证码
									</button>
								</div>
							</div>
						</div>

						<!-- 登录按钮 -->
						<button id="login-btn"
							class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] mb-6 flex items-center justify-center">
							<span>登录</span>
							<i class="fa fa-arrow-right ml-2"></i>
						</button>

						<!-- 微信登录 -->
						<button
							class="w-full bg-green-50 hover:bg-green-100 text-green-600 font-medium py-3 px-4 rounded-lg transition-all duration-300 mb-6 flex items-center justify-center">
							<i class="fa fa-weixin text-xl mr-2"></i>
							<span>微信扫码登录</span>
						</button>

						<!-- 用户协议 -->
						<div class="flex items-start mb-6">
							<input type="checkbox" id="agreement"
								class="w-4 h-4 mt-1 text-primary rounded border-gray-300 focus:ring-primary">
							<label for="agreement" class="ml-2 text-xs text-gray-500">
								登录即表示同意<a href="#" class="text-primary">《用户协议》</a>和<a href="#"
									class="text-primary">《隐私政策》</a>
							</label>
						</div>

						<!-- 注册入口 -->
						<div class="text-center">
							<span class="text-gray-500">还没有账号?</span>
							<a href="#" class="text-primary font-medium ml-1 hover:underline">立即注册</a>
						</div>
					</div>

					<!-- 底部提示 -->
					<p class="text-center text-xs text-gray-400">
						© 2023 搭子星球 版权所有
					</p>
				</div>
			</div>
		</div>

		<!-- 功能界面 (默认隐藏) -->
		<div id="app-pages" class="hidden min-h-screen flex flex-col bg-gray-50">
			<!-- 主页 -->
			<div id="home-page" class="flex flex-col h-screen">
				<!-- 顶部导航 -->
				<header class="bg-white shadow-sm sticky top-0 z-30">
					<div class="container mx-auto px-4 py-3 flex items-center justify-between">
						<div class="flex items-center">
							<h1 class="text-xl font-bold text-primary">搭子星球</h1>
						</div>
						<div class="flex items-center space-x-4">
							<button
								class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors">
								<i class="fa fa-search"></i>
							</button>
							<button
								class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors">
								<i class="fa fa-bell-o"></i>
							</button>
							<div class="w-10 h-10 rounded-full overflow-hidden border-2 border-primary">
								<img src="https://picsum.photos/200/200?random=1" alt="用户头像"
									class="w-full h-full object-cover">
							</div>
						</div>
					</div>
				</header>

				<!-- 内容区域 -->
				<main class="flex-1 overflow-y-auto scrollbar-hide">
					<!-- 推荐标签 -->
					<div class="bg-white p-4">
						<div class="flex space-x-3 overflow-x-auto pb-2 scrollbar-hide">
							<button
								class="whitespace-nowrap px-4 py-2 bg-primary text-white rounded-full text-sm font-medium">
								全部
							</button>
							<button
								class="whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
								美食
							</button>
							<button
								class="whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
								电影
							</button>
							<button
								class="whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
								运动
							</button>
							<button
								class="whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
								旅行
							</button>
							<button
								class="whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
								学习
							</button>
							<button
								class="whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
								游戏
							</button>
						</div>
					</div>

					<!-- 发布按钮 -->
					<div class="px-4 py-3">
						<button
							class="w-full bg-white border-2 border-dashed border-primary text-primary hover:bg-primary/5 rounded-xl py-3 font-medium flex items-center justify-center transition-colors">
							<i class="fa fa-pencil mr-2"></i>
							<span>发布动态，寻找搭子</span>
						</button>
					</div>

					<!-- 动态列表 -->
					<div class="space-y-4 px-4 pb-20">
						<!-- 动态1 -->
						<div class="bg-white rounded-xl overflow-hidden card-shadow">
							<div class="p-4">
								<div class="flex items-center mb-3">
									<div class="w-10 h-10 rounded-full overflow-hidden mr-3">
										<img src="https://picsum.photos/200/200?random=2" alt="用户头像"
											class="w-full h-full object-cover">
									</div>
									<div>
										<h3 class="font-medium">李小明</h3>
										<p class="text-xs text-gray-500">2小时前 · 距离3.2km</p>
									</div>
									<button class="ml-auto text-gray-400 hover:text-gray-600">
										<i class="fa fa-ellipsis-h"></i>
									</button>
								</div>

								<p class="text-gray-700 mb-3">周末有没有一起去看新上映的电影的？据说评价不错，求个搭子一起去～</p>

								<div class="grid grid-cols-3 gap-1 mb-3">
									<img src="https://picsum.photos/300/300?random=10" alt="动态图片"
										class="w-full h-24 object-cover rounded-lg">
									<img src="https://picsum.photos/300/300?random=11" alt="动态图片"
										class="w-full h-24 object-cover rounded-lg">
								</div>

								<div
									class="flex items-center justify-between text-sm text-gray-500 pt-2 border-t border-gray-100">
									<button class="flex items-center hover:text-primary transition-colors">
										<i class="fa fa-heart-o mr-1"></i>
										<span>24</span>
									</button>
									<button class="flex items-center hover:text-primary transition-colors">
										<i class="fa fa-comment-o mr-1"></i>
										<span>8</span>
									</button>
									<button class="flex items-center hover:text-primary transition-colors">
										<i class="fa fa-share mr-1"></i>
										<span>分享</span>
									</button>
								</div>
							</div>
						</div>

						<!-- 动态2 -->
						<div class="bg-white rounded-xl overflow-hidden card-shadow">
							<div class="p-4">
								<div class="flex items-center mb-3">
									<div class="w-10 h-10 rounded-full overflow-hidden mr-3">
										<img src="https://picsum.photos/200/200?random=3" alt="用户头像"
											class="w-full h-full object-cover">
									</div>
									<div>
										<h3 class="font-medium">张雨晴</h3>
										<p class="text-xs text-gray-500">昨天 18:30 · 距离5.7km</p>
									</div>
									<button class="ml-auto text-gray-400 hover:text-gray-600">
										<i class="fa fa-ellipsis-h"></i>
									</button>
								</div>

								<p class="text-gray-700 mb-3">有没有喜欢跑步的小伙伴？每周三晚上7点奥林匹克公园约跑，一起打卡锻炼！</p>

								<div class="grid grid-cols-2 gap-1 mb-3">
									<img src="https://picsum.photos/300/300?random=12" alt="动态图片"
										class="w-full h-36 object-cover rounded-lg">
									<img src="https://picsum.photos/300/300?random=13" alt="动态图片"
										class="w-full h-36 object-cover rounded-lg">
								</div>

								<div
									class="flex items-center justify-between text-sm text-gray-500 pt-2 border-t border-gray-100">
									<button class="flex items-center hover:text-primary transition-colors">
										<i class="fa fa-heart text-red-500 mr-1"></i>
										<span>56</span>
									</button>
									<button class="flex items-center hover:text-primary transition-colors">
										<i class="fa fa-comment-o mr-1"></i>
										<span>12</span>
									</button>
									<button class="flex items-center hover:text-primary transition-colors">
										<i class="fa fa-share mr-1"></i>
										<span>分享</span>
									</button>
								</div>
							</div>
						</div>

						<!-- 动态3 -->
						<div class="bg-white rounded-xl overflow-hidden card-shadow">
							<div class="p-4">
								<div class="flex items-center mb-3">
									<div class="w-10 h-10 rounded-full overflow-hidden mr-3">
										<img src="https://picsum.photos/200/200?random=4" alt="用户头像"
											class="w-full h-full object-cover">
									</div>
									<div>
										<h3 class="font-medium">王建国</h3>
										<p class="text-xs text-gray-500">3天前 · 距离1.8km</p>
									</div>
									<button class="ml-auto text-gray-400 hover:text-gray-600">
										<i class="fa fa-ellipsis-h"></i>
									</button>
								</div>

								<p class="text-gray-700 mb-3">新发现一家超赞的火锅，周末想约个人一起去尝尝，AA制，有没有同好？</p>

								<div class="mb-3">
									<img src="https://picsum.photos/600/400?random=14" alt="动态图片"
										class="w-full h-48 object-cover rounded-lg">
								</div>

								<div
									class="flex items-center justify-between text-sm text-gray-500 pt-2 border-t border-gray-100">
									<button class="flex items-center hover:text-primary transition-colors">
										<i class="fa fa-heart-o mr-1"></i>
										<span>89</span>
									</button>
									<button class="flex items-center hover:text-primary transition-colors">
										<i class="fa fa-comment-o mr-1"></i>
										<span>34</span>
									</button>
									<button class="flex items-center hover:text-primary transition-colors">
										<i class="fa fa-share mr-1"></i>
										<span>分享</span>
									</button>
								</div>
							</div>
						</div>
					</div>
				</main>

				<!-- 底部导航 -->
				<footer class="bg-white border-t border-gray-200 fixed bottom-0 left-0 right-0 z-30">
					<div class="flex justify-around items-center h-16">
						<button class="tab-btn active flex flex-col items-center justify-center text-primary">
							<i class="fa fa-home text-xl"></i>
							<span class="text-xs mt-1">主页</span>
						</button>
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-calendar text-xl"></i>
							<span class="text-xs mt-1">活动</span>
						</button>
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-star-o text-xl"></i>
							<span class="text-xs mt-1">兴趣</span>
						</button>
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-comments-o text-xl"></i>
							<span class="text-xs mt-1">消息</span>
						</button>
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-user-o text-xl"></i>
							<span class="text-xs mt-1">我的</span>
						</button>
					</div>
				</footer>
			</div>

			<!-- 活动页面 (默认隐藏) -->
			<div id="activity-page" class="hidden h-screen flex flex-col">
				<header class="bg-white shadow-sm sticky top-0 z-30">
					<div class="container mx-auto px-4 py-3 flex items-center justify-between">
						<h1 class="text-xl font-bold text-primary">附近活动</h1>
						<button
							class="bg-primary hover:bg-primary/90 text-white rounded-lg px-4 py-2 text-sm font-medium transition-colors">
							发布活动
						</button>
					</div>

					<!-- 筛选栏 -->
					<div class="flex border-t border-gray-100 overflow-x-auto scrollbar-hide">
						<button
							class="flex-1 whitespace-nowrap py-3 text-center text-primary font-medium border-b-2 border-primary">
							全部活动
						</button>
						<button
							class="flex-1 whitespace-nowrap py-3 text-center text-gray-500 hover:text-primary transition-colors">
							美食聚餐
						</button>
						<button
							class="flex-1 whitespace-nowrap py-3 text-center text-gray-500 hover:text-primary transition-colors">
							户外运动
						</button>
						<button
							class="flex-1 whitespace-nowrap py-3 text-center text-gray-500 hover:text-primary transition-colors">
							文化艺术
						</button>
						<button
							class="flex-1 whitespace-nowrap py-3 text-center text-gray-500 hover:text-primary transition-colors">
							学习交流
						</button>
					</div>
				</header>

				<main class="flex-1 overflow-y-auto scrollbar-hide p-4 pb-20">
					<!-- 活动列表 -->
					<div class="space-y-4">
						<!-- 活动1 -->
						<div
							class="bg-white rounded-xl overflow-hidden card-shadow transform transition-all duration-300 hover:scale-[1.01]">
							<div class="relative">
								<img src="https://picsum.photos/600/300?random=20" alt="活动图片"
									class="w-full h-40 object-cover">
								<div class="absolute top-3 left-3 bg-primary/90 text-white text-xs px-2 py-1 rounded">
									美食聚餐
								</div>
								<div
									class="absolute top-3 right-3 bg-white/90 text-gray-700 text-xs px-2 py-1 rounded flex items-center">
									<i class="fa fa-map-marker mr-1 text-primary"></i>
									2.5km
								</div>
							</div>

							<div class="p-4">
								<h3 class="font-bold text-lg mb-1">周末火锅派对</h3>
								<p class="text-gray-600 text-sm mb-3 line-clamp-2">
									周末一起去尝尝新开的重庆火锅，据说味道很正宗，目前已有5人报名，再招3人凑齐一桌！
								</p>

								<div class="flex items-center text-sm text-gray-500 mb-3">
									<div class="flex -space-x-2 mr-2">
										<img src="https://picsum.photos/100/100?random=21" alt="参与者"
											class="w-6 h-6 rounded-full border border-white">
										<img src="https://picsum.photos/100/100?random=22" alt="参与者"
											class="w-6 h-6 rounded-full border border-white">
										<img src="https://picsum.photos/100/100?random=23" alt="参与者"
											class="w-6 h-6 rounded-full border border-white">
										<div
											class="w-6 h-6 rounded-full bg-gray-100 border border-white flex items-center justify-center text-xs">
											+2</div>
									</div>
									<span>5人已报名</span>
								</div>

								<div class="flex items-center justify-between pt-2 border-t border-gray-100">
									<div class="flex items-center text-sm text-gray-500">
										<i class="fa fa-calendar-o mr-1"></i>
										<span>周六 18:30</span>
									</div>
									<button
										class="bg-primary/10 hover:bg-primary/20 text-primary px-3 py-1 rounded-full text-sm font-medium transition-colors">
										我要参加
									</button>
								</div>
							</div>
						</div>

						<!-- 活动2 -->
						<div
							class="bg-white rounded-xl overflow-hidden card-shadow transform transition-all duration-300 hover:scale-[1.01]">
							<div class="relative">
								<img src="https://picsum.photos/600/300?random=24" alt="活动图片"
									class="w-full h-40 object-cover">
								<div class="absolute top-3 left-3 bg-secondary/90 text-white text-xs px-2 py-1 rounded">
									户外运动
								</div>
								<div
									class="absolute top-3 right-3 bg-white/90 text-gray-700 text-xs px-2 py-1 rounded flex items-center">
									<i class="fa fa-map-marker mr-1 text-primary"></i>
									8.7km
								</div>
							</div>

							<div class="p-4">
								<h3 class="font-bold text-lg mb-1">周日骑行爱好者聚会</h3>
								<p class="text-gray-600 text-sm mb-3 line-clamp-2">
									周日早上8点从体育中心出发，骑行到郊外水库，全程约30公里，适合有一定经验的骑行爱好者。
								</p>

								<div class="flex items-center text-sm text-gray-500 mb-3">
									<div class="flex -space-x-2 mr-2">
										<img src="https://picsum.photos/100/100?random=25" alt="参与者"
											class="w-6 h-6 rounded-full border border-white">
										<img src="https://picsum.photos/100/100?random=26" alt="参与者"
											class="w-6 h-6 rounded-full border border-white">
										<img src="https://picsum.photos/100/100?random=27" alt="参与者"
											class="w-6 h-6 rounded-full border border-white">
										<img src="https://picsum.photos/100/100?random=28" alt="参与者"
											class="w-6 h-6 rounded-full border border-white">
										<div
											class="w-6 h-6 rounded-full bg-gray-100 border border-white flex items-center justify-center text-xs">
											+3</div>
									</div>
									<span>7人已报名</span>
								</div>

								<div class="flex items-center justify-between pt-2 border-t border-gray-100">
									<div class="flex items-center text-sm text-gray-500">
										<i class="fa fa-calendar-o mr-1"></i>
										<span>周日 08:00</span>
									</div>
									<button
										class="bg-primary/10 hover:bg-primary/20 text-primary px-3 py-1 rounded-full text-sm font-medium transition-colors">
										我要参加
									</button>
								</div>
							</div>
						</div>

						<!-- 更多活动 -->
						<div
							class="bg-white rounded-xl overflow-hidden card-shadow transform transition-all duration-300 hover:scale-[1.01]">
							<div class="relative">
								<img src="https://picsum.photos/600/300?random=29" alt="活动图片"
									class="w-full h-40 object-cover">
								<div class="absolute top-3 left-3 bg-blue-500/90 text-white text-xs px-2 py-1 rounded">
									文化艺术
								</div>
								<div
									class="absolute top-3 right-3 bg-white/90 text-gray-700 text-xs px-2 py-1 rounded flex items-center">
									<i class="fa fa-map-marker mr-1 text-primary"></i>
									5.3km
								</div>
							</div>

							<div class="p-4">
								<h3 class="font-bold text-lg mb-1">艺术展参观活动</h3>
								<p class="text-gray-600 text-sm mb-3 line-clamp-2">
									本周六下午一起去美术馆看新展，有专业讲解员，喜欢艺术的朋友不要错过！
								</p>

								<div class="flex items-center text-sm text-gray-500 mb-3">
									<div class="flex -space-x-2 mr-2">
										<img src="https://picsum.photos/100/100?random=30" alt="参与者"
											class="w-6 h-6 rounded-full border border-white">
										<img src="https://picsum.photos/100/100?random=31" alt="参与者"
											class="w-6 h-6 rounded-full border border-white">
									</div>
									<span>2人已报名</span>
								</div>

								<div class="flex items-center justify-between pt-2 border-t border-gray-100">
									<div class="flex items-center text-sm text-gray-500">
										<i class="fa fa-calendar-o mr-1"></i>
										<span>周六 14:00</span>
									</div>
									<button
										class="bg-primary/10 hover:bg-primary/20 text-primary px-3 py-1 rounded-full text-sm font-medium transition-colors">
										我要参加
									</button>
								</div>
							</div>
						</div>
					</div>
				</main>

				<!-- 底部导航 -->
				<footer class="bg-white border-t border-gray-200 fixed bottom-0 left-0 right-0 z-30">
					<div class="flex justify-around items-center h-16">
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-home text-xl"></i>
							<span class="text-xs mt-1">主页</span>
						</button>
						<button class="tab-btn active flex flex-col items-center justify-center text-primary">
							<i class="fa fa-calendar text-xl"></i>
							<span class="text-xs mt-1">活动</span>
						</button>
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-star-o text-xl"></i>
							<span class="text-xs mt-1">兴趣</span>
						</button>
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-comments-o text-xl"></i>
							<span class="text-xs mt-1">消息</span>
						</button>
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-user-o text-xl"></i>
							<span class="text-xs mt-1">我的</span>
						</button>
					</div>
				</footer>
			</div>

			<!-- 兴趣天地页面 (默认隐藏) -->
			<div id="interest-page" class="hidden h-screen flex flex-col">
				<header class="bg-white shadow-sm sticky top-0 z-30">
					<div class="container mx-auto px-4 py-3 flex items-center justify-between">
						<h1 class="text-xl font-bold text-primary">兴趣天地</h1>
						<button
							class="bg-primary hover:bg-primary/90 text-white rounded-lg px-4 py-2 text-sm font-medium transition-colors">
							发布兴趣
						</button>
					</div>
				</header>

				<main class="flex-1 overflow-y-auto scrollbar-hide">
					<!-- 兴趣分类 -->
					<div class="bg-white p-4">
						<div class="flex flex-wrap gap-2">
							<button class="px-4 py-2 bg-primary text-white rounded-full text-sm font-medium">
								全部兴趣
							</button>
							<button
								class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
								美食
							</button>
							<button
								class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
								运动
							</button>
							<button
								class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
								音乐
							</button>
							<button
								class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
								电影
							</button>
							<button
								class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
								旅行
							</button>
							<button
								class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
								阅读
							</button>
							<button
								class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
								游戏
							</button>
						</div>
					</div>

					<!-- 兴趣列表 -->
					<div class="p-4 space-y-4 pb-20">
						<!-- 兴趣1 -->
						<div class="bg-white rounded-xl p-4 card-shadow">
							<div class="flex items-start">
								<div
									class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-500 mr-4 flex-shrink-0">
									<i class="fa fa-cutlery text-xl"></i>
								</div>
								<div class="flex-1">
									<h3 class="font-bold text-lg mb-1">美食探店</h3>
									<p class="text-gray-600 text-sm mb-2">
										喜欢探索城市里的各种美食，从街边小吃到高档餐厅都愿意尝试，寻找同好一起分享美食体验！
									</p>
									<div class="flex items-center justify-between">
										<div class="flex items-center text-sm text-gray-500">
											<span class="flex items-center mr-3">
												<i class="fa fa-users mr-1"></i>
												<span>128人</span>
											</span>
											<span class="flex items-center">
												<i class="fa fa-map-marker mr-1 text-primary"></i>
												<span>同城</span>
											</span>
										</div>
										<button
											class="bg-primary/10 hover:bg-primary/20 text-primary px-3 py-1 rounded-full text-sm font-medium transition-colors">
											加入
										</button>
									</div>
								</div>
							</div>
						</div>

						<!-- 兴趣2 -->
						<div class="bg-white rounded-xl p-4 card-shadow">
							<div class="flex items-start">
								<div
									class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-500 mr-4 flex-shrink-0">
									<i class="fa fa-futbol-o text-xl"></i>
								</div>
								<div class="flex-1">
									<h3 class="font-bold text-lg mb-1">篮球爱好者</h3>
									<p class="text-gray-600 text-sm mb-2">
										每周固定组织篮球活动，场地已联系好，欢迎各种水平的爱好者加入，一起运动出汗！
									</p>
									<div class="flex items-center justify-between">
										<div class="flex items-center text-sm text-gray-500">
											<span class="flex items-center mr-3">
												<i class="fa fa-users mr-1"></i>
												<span>86人</span>
											</span>
											<span class="flex items-center">
												<i class="fa fa-map-marker mr-1 text-primary"></i>
												<span>5km内</span>
											</span>
										</div>
										<button
											class="bg-primary/10 hover:bg-primary/20 text-primary px-3 py-1 rounded-full text-sm font-medium transition-colors">
											加入
										</button>
									</div>
								</div>
							</div>
						</div>

						<!-- 兴趣3 -->
						<div class="bg-white rounded-xl p-4 card-shadow">
							<div class="flex items-start">
								<div
									class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mr-4 flex-shrink-0">
									<i class="fa fa-plane text-xl"></i>
								</div>
								<div class="flex-1">
									<h3 class="font-bold text-lg mb-1">周末短途旅行</h3>
									<p class="text-gray-600 text-sm mb-2">
										喜欢周末出去走走，探索周边城市和景点，寻找同样喜欢旅行的伙伴，一起规划行程！
									</p>
									<div class="flex items-center justify-between">
										<div class="flex items-center text-sm text-gray-500">
											<span class="flex items-center mr-3">
												<i class="fa fa-users mr-1"></i>
												<span>203人</span>
											</span>
											<span class="flex items-center">
												<i class="fa fa-map-marker mr-1 text-primary"></i>
												<span>周边城市</span>
											</span>
										</div>
										<button
											class="bg-primary/10 hover:bg-primary/20 text-primary px-3 py-1 rounded-full text-sm font-medium transition-colors">
											加入
										</button>
									</div>
								</div>
							</div>
						</div>

						<!-- 兴趣4 -->
						<div class="bg-white rounded-xl p-4 card-shadow">
							<div class="flex items-start">
								<div
									class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-500 mr-4 flex-shrink-0">
									<i class="fa fa-book text-xl"></i>
								</div>
								<div class="flex-1">
									<h3 class="font-bold text-lg mb-1">读书会</h3>
									<p class="text-gray-600 text-sm mb-2">
										每月读一本书，然后组织线下讨论分享会，喜欢阅读的朋友欢迎加入，一起交流思想！
									</p>
									<div class="flex items-center justify-between">
										<div class="flex items-center text-sm text-gray-500">
											<span class="flex items-center mr-3">
												<i class="fa fa-users mr-1"></i>
												<span>54人</span>
											</span>
											<span class="flex items-center">
												<i class="fa fa-map-marker mr-1 text-primary"></i>
												<span>8km内</span>
											</span>
										</div>
										<button
											class="bg-primary/10 hover:bg-primary/20 text-primary px-3 py-1 rounded-full text-sm font-medium transition-colors">
											加入
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</main>

				<!-- 底部导航 -->
				<footer class="bg-white border-t border-gray-200 fixed bottom-0 left-0 right-0 z-30">
					<div class="flex justify-around items-center h-16">
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-home text-xl"></i>
							<span class="text-xs mt-1">主页</span>
						</button>
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-calendar text-xl"></i>
							<span class="text-xs mt-1">活动</span>
						</button>
						<button class="tab-btn active flex flex-col items-center justify-center text-primary">
							<i class="fa fa-star-o text-xl"></i>
							<span class="text-xs mt-1">兴趣</span>
						</button>
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-comments-o text-xl"></i>
							<span class="text-xs mt-1">消息</span>
						</button>
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-user-o text-xl"></i>
							<span class="text-xs mt-1">我的</span>
						</button>
					</div>
				</footer>
			</div>

			<!-- 消息页面 (默认隐藏) -->
			<div id="message-page" class="hidden h-screen flex flex-col">
				<header class="bg-white shadow-sm sticky top-0 z-30">
					<div class="container mx-auto px-4 py-3">
						<h1 class="text-xl font-bold text-primary">消息</h1>
					</div>
				</header>

				<main class="flex-1 overflow-y-auto scrollbar-hide">
					<!-- 搜索栏 -->
					<div class="bg-white p-4">
						<div class="relative">
							<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
								<i class="fa fa-search"></i>
							</span>
							<input type="text" placeholder="搜索聊天记录"
								class="w-full pl-10 pr-3 py-2 rounded-lg bg-gray-100 focus:bg-white border border-transparent focus:border-gray-300 focus:ring-0 outline-none transition-all">
						</div>
					</div>

					<!-- 消息列表 -->
					<div class="divide-y divide-gray-100">
						<!-- 未读消息 -->
						<div class="bg-white p-4 flex items-center hover:bg-gray-50 transition-colors">
							<div class="relative mr-4">
								<div class="w-12 h-12 rounded-full overflow-hidden">
									<img src="https://picsum.photos/200/200?random=40" alt="用户头像"
										class="w-full h-full object-cover">
								</div>
								<div
									class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full text-white text-xs flex items-center justify-center">
									3</div>
							</div>
							<div class="flex-1 min-w-0">
								<div class="flex justify-between items-center mb-1">
									<h3 class="font-medium text-gray-900 truncate">张雨晴</h3>
									<span class="text-xs text-gray-500">09:42</span>
								</div>
								<p class="text-sm text-gray-600 truncate font-medium">好呀，周末一起去看电影吧！</p>
							</div>
						</div>

						<!-- 已读消息 -->
						<div class="bg-white p-4 flex items-center hover:bg-gray-50 transition-colors">
							<div class="relative mr-4">
								<div class="w-12 h-12 rounded-full overflow-hidden">
									<img src="https://picsum.photos/200/200?random=41" alt="用户头像"
										class="w-full h-full object-cover">
								</div>
							</div>
							<div class="flex-1 min-w-0">
								<div class="flex justify-between items-center mb-1">
									<h3 class="font-medium text-gray-900 truncate">李小明</h3>
									<span class="text-xs text-gray-500">昨天</span>
								</div>
								<p class="text-sm text-gray-500 truncate">那我们周六下午2点在电影院门口见？</p>
							</div>
						</div>

						<!-- 活动通知 -->
						<div class="bg-white p-4 flex items-center hover:bg-gray-50 transition-colors">
							<div class="relative mr-4">
								<div
									class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-500">
									<i class="fa fa-bell-o"></i>
								</div>
							</div>
							<div class="flex-1 min-w-0">
								<div class="flex justify-between items-center mb-1">
									<h3 class="font-medium text-gray-900 truncate">活动通知</h3>
									<span class="text-xs text-gray-500">昨天</span>
								</div>
								<p class="text-sm text-gray-500 truncate">你报名的"周末火锅派对"已有新成员加入</p>
							</div>
						</div>

						<!-- 系统消息 -->
						<div class="bg-white p-4 flex items-center hover:bg-gray-50 transition-colors">
							<div class="relative mr-4">
								<div
									class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-500">
									<i class="fa fa-info"></i>
								</div>
							</div>
							<div class="flex-1 min-w-0">
								<div class="flex justify-between items-center mb-1">
									<h3 class="font-medium text-gray-900 truncate">系统消息</h3>
									<span class="text-xs text-gray-500">3天前</span>
								</div>
								<p class="text-sm text-gray-500 truncate">你的账号已成功完成实名认证</p>
							</div>
						</div>

						<!-- 更多消息 -->
						<div class="bg-white p-4 flex items-center hover:bg-gray-50 transition-colors">
							<div class="relative mr-4">
								<div class="w-12 h-12 rounded-full overflow-hidden">
									<img src="https://picsum.photos/200/200?random=42" alt="用户头像"
										class="w-full h-full object-cover">
								</div>
							</div>
							<div class="flex-1 min-w-0">
								<div class="flex justify-between items-center mb-1">
									<h3 class="font-medium text-gray-900 truncate">王建国</h3>
									<span class="text-xs text-gray-500">3天前</span>
								</div>
								<p class="text-sm text-gray-500 truncate">那家火锅店需要提前预定，我已经约好了位置</p>
							</div>
						</div>
					</div>
				</main>

				<!-- 底部导航 -->
				<footer class="bg-white border-t border-gray-200 fixed bottom-0 left-0 right-0 z-30">
					<div class="flex justify-around items-center h-16">
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-home text-xl"></i>
							<span class="text-xs mt-1">主页</span>
						</button>
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-calendar text-xl"></i>
							<span class="text-xs mt-1">活动</span>
						</button>
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-star-o text-xl"></i>
							<span class="text-xs mt-1">兴趣</span>
						</button>
						<button class="tab-btn active flex flex-col items-center justify-center text-primary">
							<i class="fa fa-comments-o text-xl"></i>
							<span class="text-xs mt-1">消息</span>
						</button>
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-user-o text-xl"></i>
							<span class="text-xs mt-1">我的</span>
						</button>
					</div>
				</footer>
			</div>

			<!-- 我的页面 (默认隐藏) -->
			<div id="profile-page" class="hidden h-screen flex flex-col">
				<header class="bg-gradient-to-r from-primary to-secondary h-36 relative">
					<div class="absolute bottom-0 left-0 right-0 p-4 flex items-end">
						<div class="w-20 h-20 rounded-full overflow-hidden border-4 border-white mr-4">
							<img src="https://picsum.photos/200/200?random=1" alt="我的头像"
								class="w-full h-full object-cover">
						</div>
						<div class="text-white mb-2">
							<h2 class="text-xl font-bold">陈嘉欣</h2>
							<p class="text-sm text-white/80">寻找有趣的灵魂，一起探索世界</p>
						</div>
					</div>
				</header>

				<main class="flex-1 overflow-y-auto scrollbar-hide bg-gray-50">
					<!-- 数据卡片 -->
					<div class="bg-white -mt-6 mx-4 rounded-xl p-4 card-shadow mb-4">
						<div class="grid grid-cols-3 gap-2 text-center">
							<div>
								<div class="text-2xl font-bold text-primary mb-1">12</div>
								<div class="text-sm text-gray-500">我的活动</div>
							</div>
							<div>
								<div class="text-2xl font-bold text-primary mb-1">36</div>
								<div class="text-sm text-gray-500">我的搭子</div>
							</div>
							<div>
								<div class="text-2xl font-bold text-primary mb-1">8</div>
								<div class="text-sm text-gray-500">兴趣标签</div>
							</div>
						</div>
					</div>

					<!-- 功能菜单 -->
					<div class="bg-white mx-4 rounded-xl mb-4 card-shadow">
						<div class="p-4 border-b border-gray-100">
							<h3 class="font-medium text-gray-500">我的功能</h3>
						</div>
						<div class="divide-y divide-gray-100">
							<button
								class="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors">
								<div class="flex items-center">
									<div
										class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mr-3">
										<i class="fa fa-calendar-check-o"></i>
									</div>
									<span>我参加的活动</span>
								</div>
								<i class="fa fa-chevron-right text-gray-400"></i>
							</button>
							<button
								class="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors">
								<div class="flex items-center">
									<div
										class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-500 mr-3">
										<i class="fa fa-user-o"></i>
									</div>
									<span>我的搭子</span>
								</div>
								<i class="fa fa-chevron-right text-gray-400"></i>
							</button>
							<button
								class="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors">
								<div class="flex items-center">
									<div
										class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-500 mr-3">
										<i class="fa fa-star-o"></i>
									</div>
									<span>我的兴趣</span>
								</div>
								<i class="fa fa-chevron-right text-gray-400"></i>
							</button>
							<button
								class="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors">
								<div class="flex items-center">
									<div
										class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-500 mr-3">
										<i class="fa fa-clock-o"></i>
									</div>
									<span>浏览历史</span>
								</div>
								<i class="fa fa-chevron-right text-gray-400"></i>
							</button>
						</div>
					</div>

					<!-- 设置菜单 -->
					<div class="bg-white mx-4 rounded-xl mb-20 card-shadow">
						<div class="p-4 border-b border-gray-100">
							<h3 class="font-medium text-gray-500">设置</h3>
						</div>
						<div class="divide-y divide-gray-100">
							<button
								class="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors">
								<div class="flex items-center">
									<div
										class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 mr-3">
										<i class="fa fa-cog"></i>
									</div>
									<span>账号设置</span>
								</div>
								<i class="fa fa-chevron-right text-gray-400"></i>
							</button>
							<button
								class="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors">
								<div class="flex items-center">
									<div
										class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 mr-3">
										<i class="fa fa-shield"></i>
									</div>
									<span>隐私设置</span>
								</div>
								<i class="fa fa-chevron-right text-gray-400"></i>
							</button>
							<button
								class="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors">
								<div class="flex items-center">
									<div
										class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 mr-3">
										<i class="fa fa-question-circle-o"></i>
									</div>
									<span>帮助中心</span>
								</div>
								<i class="fa fa-chevron-right text-gray-400"></i>
							</button>
							<button
								class="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors text-red-500">
								<div class="flex items-center">
									<div
										class="w-10 h-10 rounded-full bg-red-50 flex items-center justify-center text-red-500 mr-3">
										<i class="fa fa-sign-out"></i>
									</div>
									<span>退出登录</span>
								</div>
								<i class="fa fa-chevron-right"></i>
							</button>
						</div>
					</div>
				</main>

				<!-- 底部导航 -->
				<footer class="bg-white border-t border-gray-200 fixed bottom-0 left-0 right-0 z-30">
					<div class="flex justify-around items-center h-16">
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-home text-xl"></i>
							<span class="text-xs mt-1">主页</span>
						</button>
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-calendar text-xl"></i>
							<span class="text-xs mt-1">活动</span>
						</button>
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-star-o text-xl"></i>
							<span class="text-xs mt-1">兴趣</span>
						</button>
						<button
							class="tab-btn flex flex-col items-center justify-center text-gray-500 hover:text-primary/80 transition-colors">
							<i class="fa fa-comments-o text-xl"></i>
							<span class="text-xs mt-1">消息</span>
						</button>
						<button class="tab-btn active flex flex-col items-center justify-center text-primary">
							<i class="fa fa-user-o text-xl"></i>
							<span class="text-xs mt-1">我的</span>
						</button>
					</div>
				</footer>
			</div>
		</div>

		<script>
			// 登录表单切换
			document.querySelectorAll('.login-tab').forEach(tab => {
				tab.addEventListener('click', function() {
					// 移除所有标签的active状态
					document.querySelectorAll('.login-tab').forEach(t => {
						t.classList.remove('active', 'text-primary', 'border-b-2', 'border-primary');
						t.classList.add('text-gray-500');
					});

					// 添加当前标签的active状态
					this.classList.add('active', 'text-primary', 'border-b-2', 'border-primary');
					this.classList.remove('text-gray-500');

					// 显示对应的表单
					const isPasswordLogin = this.textContent.includes('账号密码');
					document.getElementById('password-login').classList.toggle('hidden', !isPasswordLogin);
					document.getElementById('code-login').classList.toggle('hidden', isPasswordLogin);
				});
			});

			// 登录按钮点击事件
			document.getElementById('login-btn').addEventListener('click', function() {
				// 模拟登录过程
				this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 登录中...';

				setTimeout(() => {
					// 隐藏登录页面，显示应用页面
					document.getElementById('login-page').classList.add('hidden');
					document.getElementById('app-pages').classList.remove('hidden');

					// 重置登录按钮状态
					this.innerHTML = '<span>登录</span><i class="fa fa-arrow-right ml-2"></i>';
				}, 1500);
			});

			// 底部导航切换
			document.querySelectorAll('.tab-btn').forEach(btn => {
				btn.addEventListener('click', function() {
					// 获取目标页面ID
					const text = this.querySelector('span').textContent;
					let targetId;

					switch (text) {
						case '主页':
							targetId = 'home-page';
							break;
						case '活动':
							targetId = 'activity-page';
							break;
						case '兴趣':
							targetId = 'interest-page';
							break;
						case '消息':
							targetId = 'message-page';
							break;
						case '我的':
							targetId = 'profile-page';
							break;
					}

					// 隐藏所有页面
					document.querySelectorAll('#app-pages > div').forEach(page => {
						page.classList.add('hidden');
					});

					// 显示目标页面
					document.getElementById(targetId).classList.remove('hidden');

					// 更新导航按钮状态
					document.querySelectorAll('.tab-btn').forEach(b => {
						b.classList.remove('active', 'text-primary');
						b.classList.add('text-gray-500');
					});

					this.classList.add('active', 'text-primary');
					this.classList.remove('text-gray-500');
				});
			});
		</script>
	</body>
</html>